@import "../reindeer/reindeer.scss";
@import "../runo/runo.scss";

@mixin tunes {
	/* Include all the styles from the reindeer theme */
	/*@include runo;*/
	/*@include reindeer;*/
	@include runo;
	
	div.v-layout.v-horizontal.v-widget {
		white-space: nowrap;
		padding-top: 0px;
	}
	
	.v-widget {
		font-size: 11px !important;
		line-height: 14px;
		color: #000;
		font-family: "Lucida Grande", Helvetica, Arial, sans-serif;	
	}
	
	select,  button {
		font-size: 11px;
		line-height: 14px;
		color: #000;
		font-family: "Lucida Grande", Helvetica, Arial, sans-serif;	
	}
	
	.top {
		background: transparent url(images/top-bg.png) repeat-x;
		
		/* Hide all button captions */
		.v-nativebutton span {
			display: none;
		}
	}
	
	.playback {
		
		.v-nativebutton {
			width: 31px;
			height: 32px;
			overflow: hidden;
			padding: 0;
			border: none;
		}
		
		.play {
			width: 37px;
			height: 38px;
			background: transparent url(images/play.png);
		}
		
		.prev {
			background: transparent url(images/prev.png);
		}
		
		.next {
			background: transparent url(images/next.png);
		}
	}
	
	.volume {
		.mute {
			width: 13px;
			height: 14px;
			background: transparent url(images/mute.png) no-repeat left bottom;
			border: none;
			padding: 0;
			overflow: hidden;
		}
		.max {
			width: 17px;
			height: 14px;
			background: transparent url(images/max.png) no-repeat right bottom;
			border: none;
			padding: 0;
			overflow: hidden;
		}
		.v-slider {
			border: none;
		}
		.v-slider-base {
			background: transparent url(images/volume-bar.png) no-repeat 0 50%;
			height: 6px;
			border: none;
			border-top: 1px solid #aaa;
		}
		 .v-slider-handle {
			background: transparent url(images/volume-knob.png) no-repeat;
			margin-top: -3px;
		}
	}
	
	
	.status {
		background: transparent url(images/status-bg.png) repeat-x;
		line-height: 12px;
		border-right: 1px solid #959985;
		border-left: 1px solid #959985;
		border-radius: 5px;
		-webkit-border-radius: 5px;
		-moz-border-radius: 5px;
		
		.v-horizontallayout-margin-top {
			padding-top: 3px;
		}
		.v-horizontallayout-margin-bottom {
			padding-bottom: 3px;
		}
		.v-horizontallayout-margin-left {
			padding-left: 9px;
		}
		.v-horizontallayout-margin-right {
			padding-right: 9px;
		}
		
		.v-label {
			white-space: nowrap;
		}
		.v-slider {
			border: 1px solid #000;
			border-left: none;
			border-right: none;
			height: 7px;
			margin: 0;
		}
		
		.v-slider-base {
			border: none;
			height: 7px;
			border-left: 1px solid #000;
			border-right: 1px solid #000;
			background: transparent;
		}
		.v-slider-handle {
			margin: 0;
			width: 7px;
			height: 7px;
			background: transparent url(images/progress-knob.png);
		}
	}
	
	.toggle-vis, .jump {
		width: 11px;
		height: 11px;
		overflow: hidden;
		border: none;
		background: transparent url(images/toggle-visualization.png);
		padding: 0;
	}
	
	.jump {
		border: none;
		background: transparent url(images/jump-to.png);
	}
	
	.viewmode-table,.viewmode-grid,.viewmode-coverflow {
		border: none;
		width: 27px;
		height: 22px;
		overflow: hidden;
	}
	
	.viewmode-table {
		background: transparent url(images/table-view.png) no-repeat right top;
	}
	
	.viewmode-grid {
		background: transparent url(images/grid-view.png) no-repeat;
	}
	
	.viewmode-coverflow {
		background: transparent url(images/coverflow-view.png) no-repeat;
	}
	
	.v-splitpanel-horizontal .v-splitpanel-hsplitter {
		width: 1px;
		background: #404040;
	}
	
	.v-splitpanel-horizontal .v-splitpanel-hsplitter div {
		width: 3px;
		border: none;
		background: transparent;
	}
	
	.sidebar {
		background: #d1d7e2;
		
		.v-label {
			padding: 7px 0 3px 10px;
			font-weight: bold;
			text-transform: uppercase;
			color: #505d6d;
			text-shadow: #fff 0 1px 0;
		}
		
		.v-nativebutton {
			text-align: left !important;
			border: none;
			background: transparent;
			line-height: 15px;
			padding: 2px 0;
		}
		
		.v-nativebutton span {
			padding-left: 25px;
		}
		.selected {
			background: transparent url(images/selected-bg.png) repeat-x;
			color: #fff;
			font-weight: bold;
			text-shadow: #384359 0 1px 0;
			padding: 0;
			
			span {
				display: block;
				background: transparent url(images/icon-music.png) no-repeat 25px 1px;
				padding: 2px 0 2px 45px;
			}
		}
		
		.v-caption {
			background: transparent url(images/table-header-bg.png) repeat-x;
			padding: 1px 0;
			font-weight: bold;
			text-shadow: #eee 0 1px 0;
			text-align: center;
			color: #202020;
			border-top: 1px solid #404040;
			border-bottom: 1px solid #555;
		}
		.v-captiontext {
			float: none;
		}
	}
	
	.v-table-header-wrap {
		height: 16px;
		border: none;
		border-bottom: 1px solid #555;
		background: transparent url(images/table-header-bg.png) repeat-x;
		position: relative;
	}
	
	.v-table-sort-indicator {
		width: 0px;
		height: 16px;
	}
	
	.v-table-caption-container {
		font-size: 11px;
		color: #000;
		font-weight: bold;
		text-shadow: #fff 0 1px 0;
		padding-top: 1px;
	}
	
	.v-table-body {
		border: none;
	}
	
	.v-table-row-odd {
		background: #f1f5fa;
	}
	
	.v-table-row:hover {
		background: #fff;
	}
	
	.v-table-row-odd:hover {
		background: #f1f5fa;
	}
	
	.v-table .v-selected {
		background: #3d80df;
	}
	
	.v-table-cell-content {
		line-height: normal;
	}
	
	.v-table select {
		padding: 0 2px;
	}
  
}
  
